<template>
    <el-container class="navigation-bar">
        <el-aside width="200px" class="menu-content">
            <el-menu :default-active="activeIndex" background-color="#545c64" text-color="#fff"
                active-text-color="#ffd04b" @select="handleSelect" style="height: 100vh;">
                <div class="logo-content">
                    <div style="display:flex;flex-direction:row;justify-content:flex-start;align-items:center;">
                        <img src="../assets/logo.png" style="height:50px;" alt="" />
                        <div class="logo-text">
                            <div>融销通</div>
                        </div>
                    </div>
                </div>
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">商品货源</el-menu-item>
                <el-menu-item index="3">求购需求</el-menu-item>
                <el-menu-item index="4">农业知识</el-menu-item>
                <el-menu-item index="5">专家指导</el-menu-item>
                <el-menu-item index="6">购物车</el-menu-item>
                <el-sub-menu index="7">
                    <template #title>融资申请</template>
                    <el-menu-item index="7-1">item one</el-menu-item>
                    <el-menu-item index="7-2">item two</el-menu-item>
                    <el-menu-item index="7-3">item three</el-menu-item>
                    <el-sub-menu index="7-4">
                        <template #title>item four</template>
                        <el-menu-item index="7-4-1">item one</el-menu-item>
                        <el-menu-item index="7-4-2">item two</el-menu-item>
                        <el-menu-item index="7-4-3">item three</el-menu-item>
                    </el-sub-menu>
                </el-sub-menu>
                <el-sub-menu index="8">
                    <template #title>设置</template>
                    <el-menu-item index="8-1">item one</el-menu-item>
                    <el-menu-item index="8-2">item two</el-menu-item>
                    <el-menu-item index="8-3">item three</el-menu-item>
                    <el-sub-menu index="8-4">
                        <template #title>item four</template>
                        <el-menu-item index="8-4-1">item one</el-menu-item>
                        <el-menu-item index="8-4-2">item two</el-menu-item>
                        <el-menu-item index="8-4-3">item three</el-menu-item>
                    </el-sub-menu>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                <div>用户信息</div>
            </el-header>
            <el-main>
                <div>
                    内容展示
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {

}

const userInfo = ref({
    username:'',
    password:'',
    role:'',
})
</script>

<style scoped>
.navigation-bar {

    .menu-content {
        background-color: #545c64 !important;

        .logo-content {
            color: white;
            text-align: center;
            margin-top: 10px;
            margin-left: 10px;

            .logo-text {
                margin-left: 10px;
            }
        }
    }
}
</style>